<template>
  <uni-nav-bar title="授权账户" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="available">
    <view class="available_mx" @click="UsageDetails()"><text style="margin-right: 5rpx">使用明细</text></view>
    <view class="availables">
      <text>姓名</text>
      <text>{{ friendInfor.driver_name }}</text>
    </view>
    <view class="availables">
      <text>手机号</text>
      <text>{{ friendInfor.driver_mobile }}</text>
    </view>
    <view class="availables">
      <text>暂停使用授权</text>
      <switch :checked="suspen" @change="Suspension" color="#007AFF" />
    </view>
  <!--  <view class="availables">
      <text>授权车辆</text>
      <view class="availabl_img" @click="accountList()">
        <text>{{ numCar }}</text>
        <image src="../../static/mine/down.png"></image>
      </view>
    </view> -->
    <view class="available_mx" style="color: #666;justify-content: flex-start;" ><text  @click="delaccount()">删除该授权?</text></view>
  </view>
  <!-- 授权车辆 -->
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <CarList
      :accountCars="accountCars"
      @cancel="cancel"
      @addCarBy="addCarBy"
      @submitCar="submitCar"
      @addCard="addCard"
      ref="addCars"
    />
  </uni-popup>
  <Confirm ref="confirmPopup" title="是否删除授权" @cancel="closeConfirm" @confirm="unbind" />
  <VehiclePlatePad v-if="isShowPlateKeyboard" @cancel="isShowPlateKeyboard = false" @confirm="confirmPlate" />
</template>

<script setup lang="ts">
import { explainempower } from '@/gql/carAuthorized';
import { getDriverID } from '@/stores/driverID';
import { navBack } from '@/utils/navigator';
import { showLoading, showToast, successToast } from '@/utils/prompt';
import VehiclePlatePad from '@c/common/VehiclePlatePad.vue';
import CarList from '@c/authorized/carList.vue';
import Confirm from '@c/common/Confirm.vue';
import { onLoad } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import type { Ref } from 'vue';
import { ref } from 'vue';

const driver_id = getDriverID();
const friendInfor: Ref<any> = ref({
  driver_name: '',
  driver_mobile: '',
});
const accountCars: Ref<string[]> = ref([]);
let accountID = null as number;
const popup = ref(null);
const numCar = ref('');
const suspen = ref(false);
const confirmPopup = ref(null);
const addCars=ref(null)
const isShowPlateKeyboard = ref(false);

const repeat = ref(true)//放重复点击
onLoad((options) => {
  accountID = Number.parseInt(options.id);
  init();
});

function init() {
  showLoading('加载中');
  const payload = {
    query: explainempower,
    variables: {
      id: accountID,
    },
  };
  toPublish('ql/driver/getEmpowerInfo', payload, (obj: any) => {
    const { data } = obj;
    friendInfor.value = data.empower;
    accountCars.value = data.empower.cart_code_list.map((item) => item.cart_code);
    numCar.value = data.empower.cart_code_list.length;
    uni.setStorageSync(
      'cars',
      data.empower.cart_code_list.map((item) => item.cart_code),
    );
    if (data.empower.status === '0') {
      suspen.value = true;
    }
  });
}
/**
 * 修改授权信息
 */
function Suspension() {
  showLoading('正在提交');
  if(!repeat.value){
    return
  }
  repeat.value=false
  const suspens=suspen.value=!suspen.value
  const payload = {
    id: accountID,
    status: suspens ? '0' : '1',
  };
  toPublish('driver/editEmpower', payload, (obj: any) => {
    uni.hideLoading();
    repeat.value=true
    successToast(obj.msg);
    // 获取信息
    init();
  });
}
/**
 * 弹出授权车辆弹框
 */
function accountList() {
  popup.value.open();
}
function addCard(){
   popup.value.close();
   isShowPlateKeyboard.value=true
}
/**
 * 新增车牌并关闭添加车辆弹框
 */
function confirmPlate() {
 isShowPlateKeyboard.value=false
  addCars.value.init();
}
/**
 * 取消授权的车辆并恢复到初始状态
 */
function cancel() {
  accountCars.value = uni.getStorageSync('cars');
  popup.value.close();
}
/**
 * @param {Object} name 存储授权车辆信息
 */
function addCarBy(name) {
  if (accountCars.value.indexOf(name.num) === -1) {
    console.log('放入');
    accountCars.value.push(name.num);
  } else {
    console.log('拿出');
    accountCars.value.map((item, index) => {
      if (item === name.num) {
        accountCars.value.splice(index, 1);
      }
    });
  }
}
/**
 * 授权的车辆
 */
function submitCar() {
  if(!repeat.value){
    return
  }
  repeat.value=false
  popup.value.close();
  const payload = {
    from_driver_id: driver_id,
    cart_code_list: accountCars.value.toString(),
    driver_id: friendInfor.value.driver_id,
  };
  showLoading('正在提交');
  toPublish('driver/addEmpowerCart', payload, (obj: any) => {
    repeat.value=true
    uni.hideLoading();
    successToast(obj.msg);
    // 获取信息
    init();
  });
}
/**
 * 打开确认删除的弹框
 */
function delaccount() {
  confirmPopup.value.open();
}
/**
 * 关闭删除弹框
 */
function closeConfirm() {
  confirmPopup.value.close();
}
/**
 * 删除被授权人
 */
function unbind() {
  confirmPopup.value.close();
  showLoading('正在提交');
  if(!repeat.value){
    return
  }
  repeat.value=false
  const payload = {
    id: accountID,
  };
  toPublish('driver/delEmpower', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value=true
      uni.hideLoading();
      successToast(msg);
      setTimeout(navBack, 1500);
    } else {
      repeat.value=true
      uni.hideLoading();
      showToast(msg);
    }
  });
}
/**
 * 查看被授权人的加注订单使用情况
 */
function UsageDetails() {
  uni.navigateTo({
    url: '/pages/authorized/orderAccounts?id='+friendInfor.value.driver_id,
  });
}
</script>

<style scoped lang="less">
@import url('../authorized/less/accountsDetail.less');
</style>
